<template>
  <div id="forget">
    <!-- 导航栏 -->
    <nav-bar title="找回密码" leftText="返回" />
    <!-- logo面板 -->
    <logo-head text="找回密码" />
    <!-- 找回密码表单 -->
    <van-form @submit="onSubmit" class="forget_form">
      <van-field
        v-model="forgetPassForm.username"
        name="username"
        type="tel"
        label="手机号码"
        clearable
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' },{validator:telValidator,message:'手机号格式不正确', trigger:'onChange'}]"/>
        <van-field
          v-model="forgetPassForm.sms"
          center
          clearable
          label="验证码"
          placeholder="请输入短信验证码"
          :rules="[{required:true,message:'短信验证码不能为空'}]"
        >
          <template #button>
            <van-button size="small" type="primary" color="#5ba0f4" native-type="button" :disabled="isSendSmsBtnDisabled" @click="onSMSBtnClick">{{ smsBtnTitle }}</van-button>
          </template>
        </van-field>
        <van-field
        v-model="forgetPassForm.newPass"
        type="password"
        name="newPass"
        label="新密码"
        placeholder="请输入新密码"
        clearable
        :rules="[{ required: true, message: '请填写新密码' }, {validator: passLengthValidator,message:'密码长度至少要8位',trigger:'onChange'}]"/>
         <van-field
        v-model="forgetPassForm.repeatePass"
        name="repeatPass"
        label="确认密码"
        type="password"
        clearable
        placeholder="请确认新密码"
        :rules="[{ required: true, message: '请重复新密码' },{ validator: checkPassValidator,message:'两次输入的密码不一致', trigger:'onChange'}]"/>
        <div style="margin: 16px;">
          <van-button  block type="info" native-type="submit">
            找 回 密 码
          </van-button>
        </div>
    </van-form>
  </div>
</template>

<script>
import NavBarVue from '../components/NavBar.vue'
import LogoHeadVue from '../components/LogoHead.vue'
export default {
  name: 'forgetPass',
  components: {
    'nav-bar': NavBarVue,
    'logo-head': LogoHeadVue
  },
  data () {
    return {
      // 获取验证码按钮内容
      smsBtnTitle: '获取验证码',
      // 忘记密码表单对象
      forgetPassForm: {
        username: '', // 用户名/手机号
        repeatePass: '', // 重复密码
        newPass: '', // 新密码
        sms: '' // 短信验证码
      },
      // 发送验证码按钮禁用状态
      isSendSmsBtnDisabled: true
    }
  },
  methods: {
    // 表单sumbit
    onSubmit () {
      console.log('点击验证表单')
    },
    // 手机号验证器
    telValidator (value) {
      const statu = /^1[3-9]\d{9}$/.test(value)
      if (statu) {
        this.isSendSmsBtnDisabled = false
      } else {
        this.isSendSmsBtnDisabled = true
      }
      return statu
    },
    // 密码位数验证器
    passLengthValidator (value) {
      console.log(value)
      return value.length >= 8
    },
    // 密码验证器
    checkPassValidator (value) {
      return value === this.forgetPassForm.newPass
    },
    // 点击获取验证码按钮
    onSMSBtnClick () {
      // 获取电话号码
      const phone = this.forgetPassForm.username
      this.getSMS(phone)
      let time = 60
      this.isSendSmsBtnDisabled = true
      const timer = setInterval(() => {
        this.smsBtnTitle = `${time}s后重试`
        time = time - 1
        if (time <= 0) {
          clearInterval(timer)
          this.smsBtnTitle = '发送验证码'
          this.isSendSmsBtnDisabled = false
        }
      }, 100)
    },
    /**
     * 业务：获取验证码
     */
    getSMS (phone) {
      console.log('TODO 发起请求获取验证码,请求的电话号码是:' + phone)
    }
  }
}
</script>

<style>

</style>
